<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
</head>

<body>
  <canvas id="draw" width="400" height="400"></canvas>
  <!-- <script>
    const canvas = document.querySelector('#draw');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.strokeStyle = '#BADA55';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 100;
    // ctx.globalCompositeOperation = 'multiply';

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let hue = 0;
    let direction = true;

    // function draw(e) {
    //   if (!isDrawing) return;
    //   ctx.beginPath();
    //   [endX, endY] = [e.offsetX, e.offsetY];
    //   ctx.moveTo(lastX, lastY);
    //   ctx.lineTo(endX, endY);
    //   ctx.stroke();
    //   [lastX, lastY] = [endX, endY];
    //   ctx.strokeStyle = `hsl(${hue},100%,50%)`;
    //   hue++;
    //   if (hue >= 360) {
    //     hue = 0;
    //   }
    //   if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    //     direction = !direction;
    //   }
    //   if (direction) {
    //     ctx.lineWidth++;
    //   } else {
    //     ctx.lineWidth--;
    //   }



    // }

    function draw(e) {
      if (!isDrawing) return; // stop the fn from running when they are not moused down
      // console.log(e);
      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.beginPath();
      // start from
      ctx.moveTo(lastX, lastY);
      // go to
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [lastX, lastY] = [e.offsetX, e.offsetY];

      hue++;
      if (hue >= 360) {
        hue = 0;
      }
      if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
        direction = !direction;
      }

      if (direction) {
        ctx.lineWidth++;
      } else {
        ctx.lineWidth--;
      }

    }


    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });


    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);

  </script> -->
  <script>
    const canvas = document.querySelector('#draw');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.strokeStyle = '#BADA55';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 100;
    // ctx.globalCompositeOperation = 'multiply';

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let hue = 0;
    let direction = true;

    function draw(e) {
      if (!isDrawing) return; // stop the fn from running when they are not moused down
      // console.log(e);
      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.beginPath();
      // start from
      ctx.moveTo(lastX, lastY);
      // go to
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [lastX, lastY] = [e.offsetX, e.offsetY];

      hue++;
      if (hue >= 360) {
        hue = 0;
      }
      if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
        direction = !direction;
      }

      if (direction) {
        ctx.lineWidth++;
      } else {
        ctx.lineWidth--;
      }

    }

    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });


    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);

  </script>

  <style>
    html,
    body {
      margin: 0;
    }
  </style>

</body>

</html>